<template xmlns:v-clipboard="http://www.w3.org/1999/xhtml">
  <div class="box">
    <el-dialog
      :title="this.$t('ad.createDatxWallet')"
      :visible.sync="dialogVisible"
      width="500px"
      :before-close="close">
      <p class="posi-title">{{$t("ad.noticeCreatNeed")}}</p>
      <div class="form">
        <el-form :model="key" label-width="0" class="demo-dynamic">
          <el-form-item prop="private" label="公钥（Public Key）">

            <el-input v-model="keys.pubKey" disabled>
              <template slot="append"><span class="copy" v-clipboard:copy="keys.pubKey"
                                            v-clipboard:success="onCopy"
                                            v-clipboard:error="onError">{{$t("ad.copy")}}</span></template>
            </el-input>
          </el-form-item>
          <div class="tips">
            <h4>{{$t("ad.donotDisclose")}}</h4>
            <p><span>*</span>{{$t("ad.buildkeyAddvice")}}</p>

            <p><span>*</span>{{$t("ad.buildkeyProhibited")}}</p>
          </div>
          <el-form-item prop="private" label="私钥（Private Key）">
            <el-input v-model="keys.priKey" disabled="">
              <template slot="append"><span class="copy" v-clipboard:copy="keys.priKey"
                                            v-clipboard:success="onCopy"
                                            v-clipboard:error="onError">{{$t("ad.copy")}}</span></template>
            </el-input>
          </el-form-item>

          <el-form-item>
            <el-button class="button" @click="submitForm()">确认</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    components: {},
    props: {
      keys: {
        type: Object,
        default: () => {
          return {
            priKey: '123',
            pubKey: '123'
          }
        }
      }
    },
    data() {
      return {
        dialogVisible: true,
        key: {
          private: 'gejqwgeqwgekqwekqw3461564564',
          public: '111gejqwgeqwgekqwekqw3461564564'
        }
      }
    },
    methods: {
      close() {
        this.$emit('showHand', false)
      },
      submitForm(formName) {
        this.$emit('showHand', false)
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      onCopy: function (e) {
        // alert('You just copied: ' + e.text)
        this.$message.success(this.$t('ad.copySuccess'));
      },
      onError: function (e) {
        // alert('Failed to copy texts')
      }


    }
  }
</script>
<style lang="less" scoped>
  .posi-title {
    position: absolute;
    top: 44px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    color: #98889b;
  }

  .form {
    padding: 0 20px;
  }

  .box .button {
    border-radius: 4px;
    border: none;
    background-color: #98889b;
    width: 100%;
    height: 41px;
    font-size: 14px;

    color: #fff;
  }

  .copy {
    cursor: pointer;
  }

  .tips {
    border-radius: 4px;
    border: solid 1px #d6556d;
    background-color: #fcf0ef;
    padding: 10px 12px;
    margin: 40px 0 20px 0;
    h4 {
      font-size: 14px;
      color: #e82424;
      font-weight: normal;
      line-height: 32px;
    }
    p {
      line-height: 18px;
      font-size: 12px;
      span {
        color: #e82424;
      }
    }
  }
</style>
<style lang="less" >
  .box{
    .el-dialog__wrapper{
      .el-dialog{
        border-radius: 8px;
      }
      .el-dialog__header{
        border-bottom:1px solid #eaedf5;
        color:#000000;
        font-size: 18px;
        font-weight: bold;
        padding:20px;
      }
      .el-dialog__body{
        padding:30px 0;
      }
      .el-dialog__headerbtn .el-dialog__close{
        color: #666666;

      }
    }
  }
</style>


